import lessModule from "./index.module.less"
import userImage from "../../../../../../assets/image/homePage-headerMenu-user.png"
import popoverUserImage from "../../../../../../assets/image/homePage-headerMenu-popover-user.png"
import popoverPasswordImage from "../../../../../../assets/image/homePage-headerMenu-popover-password.png"
import { Button, Popover } from "antd"
import { useNavigate } from "react-router-dom"
import { useEffect, useState } from "react"
import HomePage_ModalComponent from "../../../modal"
import HomePage_HeaderMenuComponent_CheckPasswordModalComponent from "../checkPasswordModal"
import { $Http } from "../../../../../../network"
// 主页-头部菜单组件-用户组件
const HomePage_HeaderMenuComponent_UserComponent: React.FC = () => {
  const navigate = useNavigate()
  let [userData, setUserData] = useState<object>({})

  const [isCheckPasswordModal, setIsCheckPasswordModal] = useState<boolean>(false)

  const click_changlogOut = () => {
    navigate("login")
  }

  const popoverContent = (
    <div className={lessModule["homePageHeaderMenuComponentUserComponent-popover__inner"]}>
      <div className={lessModule["popover-inner__row"]} onClick={() => setIsCheckPasswordModal(true)}>
        <img src={popoverPasswordImage} />
        <span>修改密码</span>
      </div>
      <div className={lessModule["popover-inner__divider"]} />
      <div className={lessModule["popover-inner__row"]} onClick={click_changlogOut}>
        <img src={popoverUserImage} />
        <span>退出登录</span>
      </div>
    </div>
  );

  const http_findSelf = () => {
    $Http("findSelf").then((res) => {
      userData = res["data"]
      sessionStorage.setItem("userID",userData["id"])
      sessionStorage.setItem("username",userData["username"])
      sessionStorage.setItem("userPassword",userData["password"])
      sessionStorage.setItem("teamID",userData["teamID"])
      sessionStorage.setItem("departmentID",userData["departmentID"])
      sessionStorage.setItem("positionID",userData["positionID"])
      sessionStorage.setItem("power",userData["power"])
      setUserData({...userData})
    })
  }
  useEffect(() => {
    http_findSelf()
  }, [])

  return (
    <div className={lessModule["homePageHeaderMenuComponentUserComponent"]}>
      <img src={userImage} />
      <Popover className={lessModule["homePageHeaderMenuComponentUserComponent-popover"]} placement="bottomRight" content={popoverContent}>
        <span>{userData["username"]}</span>
      </Popover>
      {
        isCheckPasswordModal && <HomePage_ModalComponent width={460} change_cancel={() => setIsCheckPasswordModal(false)} contentComponent={<HomePage_HeaderMenuComponent_CheckPasswordModalComponent change_cancel={setIsCheckPasswordModal} />} />
      }
    </div>
  )
}


export default HomePage_HeaderMenuComponent_UserComponent